<template>
  <div style="min-height: 60vh; overflow: auto">
    <el-row
      v-if="this.viewStatus != 'audit'"
      style="margin-bottom: 10px; text-align: right"
    >
      <el-button
        size="small"
        :disabled="!(viewStatus == 'view')"
        v-hasPermi="['oa:leave:add']"
        >新建</el-button
      >
      <el-button
        size="small"
        :disabled="!(viewStatus == 'view' && workflowStatus == '0')"
        v-hasPermi="['oa:leave:edit']"
        >修改</el-button
      >
      <el-button
        size="small"
        :disabled="!(viewStatus == 'view' && workflowStatus == '0')"
        v-hasPermi="['oa:leave:remove']"
        >删除</el-button
      >
      <el-button
        size="small"
        :disabled="!(viewStatus == 'edit' || viewStatus == 'new')"
        @click="submitForm"
        >保存</el-button
      >
      <el-button
        size="small"
        :disabled="!(viewStatus == 'view' && workflowStatus == '0')"
        @click="handleCommit"
        >提交</el-button
      >
      <el-button
        size="small"
        :disabled="!(viewStatus == 'view' && workflowStatus == '1')"
        @click="handleCommitBack"
        >取回</el-button
      >
      <el-button size="small" @click="cancel">关闭</el-button>
    </el-row>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="表单" name="form">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          :disabled="!(this.viewStatus == 'edit' || this.viewStatus == 'new')"
        >
          <el-form-item label="申请用户" prop="applyUserId">
            <el-input v-model="form.applyUserId" placeholder="请输入申请用户" />
          </el-form-item>
          <el-form-item label="申请用户名称" prop="applyUserName">
            <el-input
              v-model="form.applyUserName"
              placeholder="请输入申请用户名称"
            />
          </el-form-item>
          <el-form-item label="申请天数" prop="applyDays">
            <el-input v-model="form.applyDays" placeholder="请输入申请天数" />
          </el-form-item>
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              clearable
              v-model="form.beginTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="申请备注" prop="memo">
            <el-input
              v-model="form.memo"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane
        label="流转记录"
        v-if="
          viewStatus != 'edit' && viewStatus != 'new' && workflowStatus != '0'
        "
        name="flowRecord"
      >
        <flowRecordList
          :bizId="id"
          bizType="LEAVE_INFO"
          v-if="activeTab == 'flowRecord'"
        />
      </el-tab-pane>
      <el-tab-pane label="流程图" name="flwoViewer">
        <flowViewer
          :bizId="id"
          bizType="LEAVE_INFO"
          v-if="activeTab == 'flwoViewer'"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { addLeave, updateLeave, getLeave } from "@/api/oa/leave";
import { commit } from "@/api/flowable/workflow";

export default {
  name: "leaveForm",
  props: {
    id: {
      type: Number,
      default: null,
    },
    viewStatus: {
      type: String,
      default: "view", // new, view, edit, audit
    },
  },

  data() {
    return {
      activeTab: "form",
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      workflowStatus: null, //工作流状态
    };
  },

  mounted() {
    this.reset();
  },

  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateLeave(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addLeave(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.title = "修改请假申请单";
      this.viewStatus = "edit";
    },

    // 提交按钮
    handleCommit() {
      commit({
        bizId: this.form.id,
        bizType: "LEAVE_INFO",
      }).then((response) => {
        this.$modal.msgSuccess("提交成功");
      });
    },

    // 取回按钮
    handleCommitBack() {
      commit({
        bizId: this.form.id,
        bizType: "LEAVE_INFO",
        action: "back",
      }).then((response) => {
        this.$modal.msgSuccess("取回成功");
      });
    },

    // 表单重置
    reset() {
      this.activeTab = "form";
      if (this.id != null) {
        getLeave(this.id).then((response) => {
          this.form = response.data;
          this.viewStatus = "view";
          this.workflowStatus = response.data.workflowStatus;
        });
      } else {
        this.form = {};
        this.viewStatus = "new";
        this.workflowStatus = "0";
      }
      this.resetForm("form");
    },
  },
};
</script>

<style></style>
